<template>
  <div class="container">
    <!-- 面包屑导航 -->
    <div class="topNav">
      <el-breadcrumb :separator-icon="ArrowRight">
        <el-breadcrumb-item :to="{ name: 'base' }">仓库系统</el-breadcrumb-item>
        <el-breadcrumb-item>质检记录</el-breadcrumb-item>
      </el-breadcrumb>
    </div>

    <div class="together-content">

      <!-- 搜索表单 -->
      <div class="search-form">
        <el-form :inline="true" label-width="60px" style="width: 100%">
          <el-form-item>
            <el-input v-model="searchForm.keyword" placeholder="供应商/客户/单据号/备注" clearable />
          </el-form-item>

          <!-- 时间范围选择 -->
          <el-form-item label="日期：">
            <el-date-picker v-model="searchForm.dateRange" type="datetimerange" range-separator="-"
              start-placeholder="开始时间" end-placeholder="结束时间" :shortcuts="shortcuts" style="width: 340px" clearable />
          </el-form-item>

          <!-- 业务类别 -->
          <el-form-item label="业务：">
            <el-select style="width: 200px" v-model="searchForm.type">
              <el-option label="请选择" value="" />
              <el-option label="采购入库质检" :value="1" />
              <el-option label="退货入库质检" :value="2" />
            </el-select>
          </el-form-item><br /><br />

          <!-- 查询按钮 -->
          <el-form-item>
            <el-button type="primary" @click="onSubmit">查询</el-button>
          </el-form-item>
        </el-form>
      </div>

      <!-- 分割线 -->
      <el-divider style="margin: 10px 0" />

      <!-- 操作按钮 -->
      <div style="margin-bottom: 15px; text-align: right;">
        <el-button type="primary" @click="toAddView()">新增 </el-button>
      </div>

      <el-table :data="qualityInspectionList" style="width: 100%" border v-loading="loading"
        @selection-change="handleSelectionChange">
        <el-table-column type="selection" />

        <!-- 质检单号 -->
        <el-table-column prop="code" label="质检单号" width="160" align="center" />

        <!-- 业务类型：采购入库 / 销售退货 -->
        <el-table-column label="业务类型" width="120" align="center">
          <template #default="{ row }">
            {{ showInspectionType(row.type) }}
          </template>
        </el-table-column>

        <!-- 供应商/客户 -->
        <el-table-column prop="partnerName" label="供应商/客户" width="180" align="center" />

        <!-- 负责人（制单人） -->
        <el-table-column prop="staffName" label="负责人" width="140" align="center" />

        <!-- 审核人 -->
        <el-table-column prop="auditorName" label="审核人" width="140" align="center" />

        <!-- 状态（格式化显示） -->
        <el-table-column label="状态" width="120" align="center">
          <template #default="{ row }">
            {{ showInspectionStatus(row.status) }}
          </template>
        </el-table-column>

        <!-- 创建时间（可选，推荐加上） -->
        <el-table-column prop="createdTime" label="创建时间" width="160" align="center">
          <template #default="{ row }">
            {{ row.createdTime }}
          </template>
        </el-table-column>

        <!-- 操作列 -->
        <el-table-column fixed="right" label="操作" width="150" align="center">
          <template #default="scope">
            <el-button link type="warning" size="small"
              @click="router.push({ name: 'inspectionDetails', params: { id: scope.row.id } })">
              编辑
            </el-button>
            <el-button link type="danger" size="small" @click="deleteRow(scope.$index, scope.row.id)">
              删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <div style="margin-top: 20px; text-align: center;">
        <el-pagination v-if="pageInfo" :current-page="pageNum" :page-size="pageSize" :total="pageInfo.total"
          @current-change="changePage" layout="total, ->, prev, pager, next, jumper" background />
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, inject } from 'vue'
import { useRouter } from 'vue-router'
// 面包屑箭头                               
import { ArrowRight } from '@element-plus/icons-vue'

let axios = inject("axios");
let router = useRouter();


//分页相关数据  - page
let pageInfo = ref(null);
let pageNum = ref(1), pageSize = ref(10);
function changePage(nowPage) {
  pageNum.value = nowPage;
  onSubmit();
}

function toAddView() {
  router.push({
    name: 'inspectionDetails',
  })
}
// 搜索表单
const searchForm = ref({
  keyword: "",
  type: '',
  dateRange: [],
  providerCode: '',
})
let qualityInspectionList = ref([]);


const loading = ref(false);
const onSubmit = () => {
  if (loading.value) return;
  loading.value = true;
  axios.post('/xyy/quality/page', {
    pageNum: pageNum.value,
    pageSize: pageSize.value,
    // companyCode: company,
    //搜索表单中的信息
    keyword: searchForm.value.keyword,
    beginTime: searchForm.value.dateRange == null ? null : searchForm.value.dateRange[0],
    endTime: searchForm.value.dateRange == null ? null : searchForm.value.dateRange[1],
    type: searchForm.value.type,
  }).then(res => {
    pageInfo.value = res.data.pageInfo;
    qualityInspectionList.value = res.data.pageInfo ? res.data.pageInfo.list : null
    console.log("pageInfo---:", pageInfo);
  }).finally(() => {
    loading.value = false;
  })
}


// 业务类型映射
const showInspectionType = (type) => {
  if (type === 1) return '采购入库';
  if (type === 2) return '销售退货';
  return '未知';
};

// 状态映射（根据你的状态定义调整）
const showInspectionStatus = (status) => {
  const map = {
    0: '已打回',
    1: '已创建',
    2: '已提交',
    3: '已审核'
  };
  return map[status] || '未知状态';
};

onMounted(() => {
  onSubmit();
})








</script>

<style scoped>
.container {
  padding: 20px;
}

.topNav {
  margin-bottom: 20px;
}
</style>